<template>
  <div class="homePage">
    <!--搜索框-->
    <div class="search-bar">
      <a-input-search
        v-model:value="searchParam.searchText"
        placeholder="从海量图片中搜索"
        enter-button="搜索"
        size="large"
        @search="doSearch"
      />
    </div>
    <!--分类和标签-->
    <a-tabs v-model:active-key="selectedCategory" @change="doSearch">
      <a-tab-pane key="all" tab="全部" />
      <a-tab-pane v-for="category in categoryList" :key="category" :tab="category"></a-tab-pane>
    </a-tabs>
    <div class="tag-bar">
      <span style="margin-right: 8px">标签：</span>
      <a-space :size="[0, 8]" wrap>
        <a-checkable-tag
          v-for="(tag, index) in tagList"
          :key="tag"
          v-model:checked="selectedTag[index]"
          @change="doSearch"
        >
          {{ tag }}
        </a-checkable-tag>
      </a-space>
    </div>
    <!--图片列表-->
    <picture-list
      :dataList="dataList"
      :loading="loading"
      :show-action="false"
      :on-reload="queryPicturePage"
    />
    <!--分页器-->
    <a-pagination
      v-model:current="searchParam.pageNum"
      v-model:page-size="searchParam.pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @change="onPageChange"
      :page-size-options="pageSizeOptions"
      show-size-changer
      style="text-align: right"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getTagCategoryUsingGet, listPictureVoUsingGet } from '@/api/pictureController.ts'
import PictureList from '@/components/PictureList.vue'

const dataList = ref<API.PictureVO[]>([])
const total = ref(0)
const loading = ref(false)
const pageSizeOptions = ref<string[]>(['5', '10', '20'])
// 搜索条件
const searchParam = reactive<API.listPictureUsingGETParams>({
  pageNum: 1,
  pageSize: 10,
  name: '',
  introduction: '',
  category: '',
  tag: '',
  picFormat: '',
})

// 获取图片数据
const queryPicturePage = async () => {
  loading.value = true
  const params = {
    ...searchParam,
    tag: '',
  }
  if (selectedCategory.value !== 'all') {
    params.category = selectedCategory.value
  }
  if (selectedTag.value) {
    selectedTag.value.forEach((checked, index) => {
      if (checked) {
        params.tag = tagList.value[index]
      }
    })
  }
  const res = await listPictureVoUsingGet(params)
  dataList.value = res.data.records ?? []
  total.value = res.data.total ?? 0
  loading.value = false
}
// 分页器
const onPageChange = (current: number, pageSize: number) => {
  searchParam.pageNum = current
  searchParam.pageSize = pageSize
  queryPicturePage()
}
const doSearch = () => {
  // 重置页码
  searchParam.pageNum = 1
  queryPicturePage()
}
const categoryList = ref<string[]>([])
const selectedCategory = ref<string>('all')
const tagList = ref<string[]>([])
const selectedTag = ref<boolean[]>([])
const getTagCategoryOptions = async () => {
  const res = await getTagCategoryUsingGet()
  categoryList.value = res?.data.categoryList || []
  tagList.value = res?.data.tagList || []
}
onMounted(() => {
  queryPicturePage()
  getTagCategoryOptions()
})
</script>

<style scoped>
.homePage {
  margin-bottom: 16px;
}

.homePage .search-bar {
  max-width: 400px;
  margin: 0 auto 16px;
}

.homePage .tag-bar {
  margin-bottom: 16px;
}
</style>
